<template>
    <div class="box">
        <div class="content">
            <!-- 标签头 -->
            <div class="label-head">
                <div class="label-title">信息评估</div>
            </div>
            <!-- 表格内容 -->
            <div class="table">
                <el-table :data="state.tableData" border style="width: 100%">
                    <el-table-column prop="assessId" label="ID" width="60" />
                    <el-table-column prop="buildingName" label="评估楼栋" width="100px" />
                    <el-table-column prop="region" label="所属区域" width="100px" />
                    <el-table-column prop="assessPrice" sortable label="评估单价" width="120px" />
                    <el-table-column prop="assessStartDate" sortable label="开始日期" width="120px" />
                    <el-table-column prop="assessEndDate" sortable label="结束日期" width="120px" />
                    <el-table-column prop="averagePrice" sortable label="平均单价" width="120px" />
                    <el-table-column prop="assessCompany" sortable label="评估公司" width="120px" />
                    <el-table-column label="操作" width="140px">
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">审核</el-button>
                            <el-button size="small" type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="note" label="备注" />
                </el-table>
            </div>
            <!-- 分页器 -->
            <div class="paging">
                <el-pagination background v-model:current-page="state.currentPage" v-model:page-size="state.pageSize" small
                    layout="prev, pager, next, jumper" :total="state.total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" @prev-click="prevChange" @next-click="nextChange" />
            </div>
        </div>
        <div v-if="state.hiden === true" class="allHiden"></div>
        <div class="ehiden" :class="state.hiden === true ? 'hiden' : ''">
            <div class="close">
                <i class="iconfont icon-cha" style="cursor: pointer;" @click="closeHiden"></i>
            </div>
            <el-form label-width="100px" label-position="left" :model="state.form" style="max-width: 460px">
                <el-form-item label="id:">
                    <el-input disabled v-model="state.form.assessId" />
                </el-form-item>
                <el-form-item label="楼栋名:">
                    <el-input v-model="state.form.buildingName" />
                </el-form-item>
                <el-form-item label="所属区域:">
                    <el-input v-model="state.form.region" />
                </el-form-item>
                <el-form-item label="物业小区:">
                    <el-input v-model="state.form.projectInfo" />
                </el-form-item>
                <el-form-item label="评估价格:">
                    <el-input v-model="state.form.assessPrice" />
                </el-form-item>
                <el-form-item label="平均价格:">
                    <el-input v-model="state.form.averagePrice" />
                </el-form-item>
                <el-form-item label="评估开始日期:">
                    <el-input v-model="state.form.assessStartDate" />
                </el-form-item>
                <el-form-item label="评估结束日期:">
                    <el-input v-model="state.form.assessEndDate" />
                </el-form-item>
                <el-form-item label="评估公司:">
                    <el-input v-model="state.form.assessCompany" />
                </el-form-item>
                <el-form-item label="备注:">
                    <el-input v-model="state.form.note" />
                </el-form-item>
            </el-form>
            <div class="examine-button">
                <el-button type="primary" @click="changeInfo" plain>修改</el-button>
            </div>
        </div>
        <!-- 确认删除框 -->
        <el-dialog v-model="state.dialogVisible" title="提示" width="30%">
            <span>你确定要删除这条评估吗</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="tuihou">取消</el-button>
                    <el-button type="primary" @click="handleDelete2">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { onMounted, reactive } from 'vue';
import getApi from '@/api/getApi';
export default {
    setup() {
        const state = reactive({
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            total: 1,
            hiden: false,
            form: {
                assessId: null,
                projectInfo: "",
                buildingName: "",
                region: "",
                assessPrice: null,
                assessStartDate: "",
                assessEndDate: "2023-01-18T16:00:00.000+00:00",
                averagePrice: null,
                assessCompany: "",
                note: "",
                headId: ""
            },
            dialogVisible:false,
            deleteinfo:null
        })
        // 生命周期
        onMounted(() => {
            getTabeleData()
        })
        // 读取cookie缓存token
        const getCookie = (cname) => {   // 参数为存储名
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name) == 0) return decodeURIComponent(c.substring(name.length, c.length));
            }
            return "";
        };
        // 获取表格数据,给分页器页数
        const getTabeleData = () => {
            let obj = {
                Authorization: getCookie('token')
            }
            getApi('/buildassess', 'get', {}, obj).then((res) => {
                state.total = Math.ceil(res.data.data.length / state.pageSize) * state.pageSize
            }).then(() => {
                handleCurrentChange(1)
            })
        }
        // page-size分页器事件
        const handleSizeChange = () => {

        }
        // current-page分页器事件
        const handleCurrentChange = (e) => {
            // 切换页数，然后把e传参的页数传进来，然后发起下一页的数据请求，然后申请完将拿到的数据数组赋值给state.showData
            let obj = {
                Authorization: getCookie('token')
            }
            getApi('/buildassess/selectbypage', 'get', { page: e, pageSize: state.pageSize }, obj).then((res) => {
                state.tableData = res.data.data.data
            })
        }
        // 点击上一页分页器触发事件
        const prevChange = (e) => {
            // console.log(e,2)
        }
        // 点击下一页分页器触发事件
        const nextChange = (e) => {
            // console.log(e,3)
        }
        // 审核
        const handleEdit = () => {
            state.hiden = true
            state.form = { ...state.tableData[0] }
        }
        // 删除
        const handleDelete = (e) => {
            state.deleteinfo = e
            state.dialogVisible = true
        }
        // 确认删除
        const handleDelete2 = () => {
            getApi(`/buildassess/${state.tableData[state.deleteinfo].assessId}`, 'delete', {}, { Authorization: getCookie('token') }).then((res) => {
                if (res.data.msg === '删除成功') {
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                    state.deleteinfo = null
                    getTabeleData()
                    state.dialogVisible = false
                } else {
                    state.deleteinfo = null
                    ElMessage.error('删除失败')
                    state.dialogVisible = false
                }
            })
        }
        // 取消删除
        const tuihou = () =>{
            state.deleteinfo = null
            state.dialogVisible = false
        }
        // 关闭页面
        const closeHiden = () => {
            state.hiden = false
            state.form = {
                assessId: null,
                projectInfo: "",
                buildingName: "",
                region: "",
                assessPrice: null,
                assessStartDate: "",
                assessEndDate: "",
                averagePrice: null,
                assessCompany: "",
                note: "",
                headId: ""
            }
        }
        // 修改页面
        const changeInfo = () => {
            getApi('/buildassess', 'put', state.form, { Authorization: getCookie('token') }).then((res) => {
                if (res.data.msg === '修改成功') {
                    return
                } else {
                    ElMessage.error('修改失败')
                }
            }).then(() => {
                closeHiden()
                ElMessage({
                    message: '修改成功',
                    type: 'success',
                })
            }).then(() => {
                getTabeleData()
            })
            // closeHiden()
        }
        return { state, handleSizeChange, handleCurrentChange, prevChange, nextChange, handleEdit, handleDelete, closeHiden, changeInfo,handleDelete2,tuihou }
    }
}
</script>

<style lang="less" scoped>
.box {
    padding: 10px 10px 10px 0px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;

    .content {
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        border-radius: 8px;
        padding-left: 30px;
        padding-top: 30px;
        padding-right: 20px;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        overflow-y: scroll;

        .label-head {
            height: 30px;
            display: flex;

            .label-title {
                color: #337ecc;
                border-bottom: 2px solid #337ecc;
            }
        }

        .table {
            margin-top: 16px;
            margin-bottom: 60px;
        }

        .paging {
            width: calc(100% - 32px);
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
        }
    }

    ::-webkit-scrollbar {
        width: 7px;
    }

    .allHiden {
        position: fixed;
        left: 0px;
        top: 0px;
        z-index: 10;
        width: 100vw;
        height: 100vh;
        background-color: rgba(94, 94, 94, 0.164);
    }

    .ehiden {
        position: fixed;
        right: -450px;
        bottom: 0px;
        z-index: 11;
        width: 400px;
        height: 100vh;
        background-color: #ffffff;
        padding: 20px 30px 20px 30px;
        box-sizing: border-box;
        overflow: hidden;
        overflow-y: scroll;

        .close {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 30px;
        }

        .examine-button {
            margin-top: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .hiden {
        transform: translateX(-450px);
        transition: all 0.4s;
    }
}
</style>